<template>
	<view class="bg-gray">
		<view class="swipecarouselback">
			<image src="https://www.haopengsong.xyz/static/arrleft.png" class="arricon" @click="jump"></image>
			<carousel :res="carouselImage" class="bgshare" height='500' />
		</view>
		<view class="width">
			<view class="linebox">
				<view class="bg-white commonbg color6">
					<view class="font15 flex-row-between bold color3">
						{{info.siteName}}
					</view>
					<view class="color6 fontbottom">
						{{info.remark}}
					</view>
					<view class="flex-row-start iteminfo">
						<view class="type">可用设备</view>
						<view>投影仪</view>
					</view>
					<view class="flex-row-start iteminfo">
						<view class="type">推荐用途</view>
						<view>室外教学</view>
					</view>
					<view class="flex-row-start iteminfo">
						<view class="type">最多可容纳人数</view>
						<view>3人</view>
					</view>
					<view class="flex-row-start iteminfo">
						<view class="type">使用规则</view>
						<view>不可放炮竹</view>
					</view>
					<view class="flex-row-start iteminfo">
						<view class="type">收费标准</view>
						<view>¥0/人</view>
					</view>
				</view>
				<view class="bg-white boxin">
					<view class="flex-row-between boxitem">
						使用日期
						<view>
							2024-08-26
							<u-icon name='arrow-right'></u-icon>
						</view>
					</view>
					<view class="boxitem">
						<view class="liuyan">
							<u-input
							    type='textarea'
								placeholder="请输入需求描述"
								class="mobile"
								v-model="liuyan"
							/>
						</view>
					</view>
				</view>
				<view class="bg-white boxin">
					<view class="flex-row-between boxitem">
						联系人
						<input class="uni-input" v-model='username' placeholder="请输入" />
					</view>
					<view class="flex-row-between boxitem">
						联系电话
						<input class="uni-input" v-model='phone' placeholder="请输入" />
					</view>
				</view>
				<view class="color9 font12 flex-row-start agree">
					<u-icon name='checkmark-circle' size='38' color='#499C43' class="circle" />
					阅读并同意<view class="color3">《场地使用安全协议》</view>
				</view>
				<view  class="apply">
					<u-button type="primary" shape='circle' @click="jump">提交申请</u-button>
				</view>
				
			</view>
		</view>
		<bottomsubmit title='确认支付'></bottomsubmit>
	</view>
</template>

<script>
	import tpl_banner from "@/pages/tabbar/roperty/template/tpl_banner"; 
	import { getLxyCourseDetail } from "@/api/course";
	export default {
		components: {
			carousel: tpl_banner
		},
		data(){
			return {
				carouselImage:[
					{ name:'http://43.138.30.146:8080/profile/upload/2025/02/13/cd_20250213113942A059.png'}
				],
				info:{},
			}
		},
		onLoad(options) {
			this.getDetail(options.id)
		},
		methods:{
			getDetail(id){
				getLxyCourseDetail({id:id}).then(res=>{
					this.info = res
				})
			},
			jump(res){
				// 返回上一页
				uni.navigateBack({
				    delta: 1 // 默认值是1，表示返回的页面层数
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
 .width{
	 position: relative;
	 top:-40px;
	 padding-bottom: 50px;
 }
 .commonbg{
	 margin: 0;
 }
 .boxin,.linebox,.bgimg{
	 margin-top: 10px;
 }
 .apply{
	 margin-top: 30px;
 }
 .liuyan{
	 margin-top: 0!important;
 }
 .agree{
	 margin-top: 10px;
	 .circle{
	 	 margin-right: 5px;
	 }
 }
</style>